<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        li{
            list-style: none;
        }
    #menu{
            background-color: bisque;
            width: 160px;
            border: solid 2px #ccc;
            border-radius: 8px;
            margin: 0px;
            padding: 20px 30px;
            
        }
        #menu>li{
            width: 150px;
            height: 50px;
            text-align: center;
            
        }
        #rq{
            position: absolute;
            left: 350px;
            top:0px;
        }
        #menu2{
            position: absolute;
            left: 300px;
            top: 20px;
        }
        #menu2>li>ul>li{
            margin-top: 10px;
            height: 40px;
        }
        #show{
            position: relative;
            left: 300px;
            top: 50px;
        }
        /* #logo{
            height: 76px;
            text-indent: 76px;
            font-size: 28px;
            font-weight: 900;
            margin-left: 100px;
            margin-right: 90px;
            float: left;
        } */
        
    </style>
</head>
<body>
    <div id="top">
        <div id="logo">
            在线测试系统
        </div>
        <span id="show"></span>
    </div>
    <ul id="menu">

    </ul>
    <span id="rq"></span>
    <ul id="menu2">
        
    </ul>
    
    <script>
        rq=document.getElementById("rq");
        now=new Date();
        var week= new Array("星期日","星期一","星期二", "星期三", "星期四", "星期五", "星期六");
        rq.innerHTML=now.getFullYear()+"年"+now.getMonth()+"月"+now.getDate()+"日"+ "," + week[now.getDay()];

        var jsonleft='[{"nav":"首页","subnav":[]},{"nav":"成绩查询","subnav":[]},{"nav":"单元测试1","subnav":[{"title":"单元测试1"}]},{"nav":"单元测试2","subnav":[]},{"nav":"单元测试3","subnav":[]},{"nav":"单元测试4","subnav":[]},{"nav":"单元测试5","subnav":[]},{"nav":"单元测试6","subnav":[]},{"nav":"单元测试7","subnav":[]},{"nav":"单元测试8","subnav":[]}]'
        
        var ulelem=document.getElementById("menu");

        var jsonarray=JSON.parse(jsonleft);

        var lihemls="";

        for (var i=0;i<jsonarray.length;i++){
            lihemls+="<li>"+jsonarray[i].nav;{
                var lisub=jsonarray[i].subnav.length;
                // if(lisub>0){
                //     lihemls+="<ul>";
                //     for(var j=0;j<lihemls;j++){
                //         lihemls+="<li>"+jsonarray[i].subnav[j].title+"</li>"
                //     }
                // }
                lihemls+="</li>";
            }
            ulelem.innerHTML=lihemls;
        };
         var jsonright='[{"title":"1.下列选项中（）可以用来检索下拉列表框中被选项目的索引号。","select":[{"name":"A.selectedIndex" },{"name":"B.options"},{"name":"C.length"},{"name":"size"}]},{"title":"2.JavaScript中（）方法可以对数组元素进行排序。","select":[{"name":"A.add()"},{"name":"B.join()"},{"name":"C.sort"},{"name":"D.length"}]}]'
                        
        
        var ullist=document.getElementById("menu2");

        var jsonarry2=JSON.parse(jsonright);

        var lilist="";

        for(var i=0;i<jsonarry2.length;i++){
            lilist+="<li id='dianji'>"+jsonarry2[i].title;{
                var subli=jsonarry2[i].select.length;
                if (subli>0){
            lilist+="<ul>";
            for(var j=0;j<subli;j++){
                lilist+="<li>"+"<input type='radio',name='xk'>" +jsonarry2[i].select[j].name+"</li>"
            }
            lilist+="</ul>"
        }
                lilist+="</li>"
            }
            ullist.innerHTML=lilist;
        };   


    /*    var show=document.getElementById("show");
        var questions=new Array();
        var xx=new Array();
        questions[0]="1.下列选项中（）可以用来检索下拉列表框中被选项目的索引号。"
        questions[1]="2.JavaScript中（）方法可以对数组元素进行排序。"
        xx[0]= ["A.selectedlndex", "B.options", "C.lenght", "D.size"];
        xx[1]=["A.add()", "B.join()", "C.sort()", "D.length()"];
        var shuchu=questions.length;
        for(var i=0;i<shuchu;i++){
            show.innerHTML+=i+1+"."+questions[i]+"<br/>";
            show.innerHTML+="<input type='radio' name='shuchu' >"+xx[i][0]+"<br>";
            show.innerHTML+="<input type='radio' name='shuchu' >"+xx[i][1]+"<br>";
            show.innerHTML+="<input type='radio' name='shuchu' >"+xx[i][2]+"<br>";
            show.innerHTML+="<input type='radio' name='shuchu' >"+xx[i][3]+"<br>";
        }*/

        
        
    </script>
</body>
</html>